import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Tab } from '@alifd/next';
import IceContainer from '@icedesign/container';
import { withRouter } from 'react-router-dom';
import './bought.scss';

function random(min, max) {
  return parseInt(Math.random() * (max - min + 1) + min, 10);
}

function mockCentent() {
  return Array.from({ length: 2 + Math.round(Math.random() * 5) }).map(() => {
    return {
      title: ['计算机', 'xxxx流行学', '美发心得', '场景搭配'][random(0, 3)],
      detail: [
        {
          label: '文章描述',
          desc:
            '分享日常的真人穿搭或专业的教程，对时尚有自己的理解，能够给消费者提供时尚搭配心得',
        },
      ],
    };
  });
}

class PostCategory extends PureComponent {
  // handleNewPost = () => {
  //   this.props.history.push('/post/new');
  // };

  render() {
    const { allOrderData, orderedData, orderingData, orderTotal, totalIncome, balance, totalCost } = this.props;
    const ownId = localStorage.getItem("id");
    const tabs = [
      {
        title: '全部',
        icon: require('./images/orders.png'),
        key: 'home',
        content: allOrderData,
      },
      {
        title: '未完成',
        icon: require('./images/ordering.png'),
        key: 'doc',
        content: orderingData,
      },
      {
        title: '已完成',
        icon: require('./images/orderCompleted.png'),
        key: 'collect',
        content: orderedData,
      },
    ];

    return (
      <div>
        <div className="titleWrapper">
          <span
            style={{
              fontSize: 16,
              fontWeight: 'bold',
              color: '#333',
              paddingRight: 20,
            }}
          >
            作品列表
          </span>
          <span style={{ fontSize: 12, color: '#999' }}>
            订单总数：{orderTotal} 总支出：{totalCost} 总收益：{totalIncome} 余额：{balance}
          </span>
        </div>
        <Tab
          navStyle={{ backgroundColor: '#fff' }}
          contentStyle={{
            backgroundColor: '#fff',
            marginTop: '20px',
            borderRadius: '6px',
          }}
        >
          {tabs.map((tab) => {
            return (
              <Tab.Item
                tabStyle={{ height: 60, padding: '0 15px' }}
                key={tab.key}
                title={
                  <div className="navItemWraper">
                    <img
                      alt={tab.title}
                      src={tab.icon}
                      style={{ width: 30, marginRight: 8 }}
                    />
                    {tab.title}
                  </div>
                }
              >
                <div className="postCategoryList">
                  {
                    tab.content.length === 0 ? 
                    <IceContainer style={{textAlign: "center"}}>抱歉，您还未进行交易！</IceContainer>
                    :
                    tab.content.map((item, index) => {
                    // 订单卡片样式需要展示的内容：
                    // id: 订单编号 5
                    // type: 订单类型 版权授权
                    // createTime: 订单生成时间 2019-03-27T15:52:05.000+0000
                    // orderMoney: 价格 22.15
                    // moneyType: 支付类型 CR
                    // orderInfo: 订单说明 购买《XXX专利》阅读权限
                    // buyerId: 买方id（根据自己的id区分订单的颜色，自己是买方则为#336666，自己是卖方则为#CC9933
                    // sellerId: 卖方id
                    if(item.buyerId == ownId ) {
                      return (
                        <div key={index} className="buyerOrder">
                          <div className="blockDetail">
                            <div className="blockTitle"> 订单编号 {item.id} </div>
                            <div className="blockItem">
                              <label className="blockLable"> 交易类型 </label>
                              <div className="blockDesc"> {item.type} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 交易价格 </label>
                              <div className="blockDesc"> {item.orderMoney + item.moneyType} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 交易说明 </label>
                              <div className="blockDesc"> {item.orderInfo} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 买方ID </label>
                              <div className="blockDesc"> {item.buyerId}（我）</div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 卖方ID </label>
                              <div className="blockDesc"> {item.sellerId} </div>
                            </div>
                            <div className="blockTime">
                              <div className="blockCreateTime">生成时间：{item.createTime} </div>
                            </div>
                          </div>
                        </div>
                      )
                    }else {
                      return (
                        <div key={index} className="sellerOrder">
                          <div className="blockDetail">
                          <div className="blockTitle"> 订单编号 {item.id} </div>
                            <div className="blockItem">
                              <label className="blockLable"> 交易类型 </label>
                              <div className="blockDesc"> {item.type} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 交易价格 </label>
                              <div className="blockDesc"> {item.orderMoney + item.moneyType} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 交易说明 </label>
                              <div className="blockDesc"> {item.orderInfo} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 买方id </label>
                              <div className="blockDesc"> {item.buyerId} </div>
                            </div>
                            <div className="blockItem">
                              <label className="blockLable"> 卖方id </label>
                              <div className="blockDesc"> {item.sellerId}（我）</div>
                            </div>
                            <div className="blockTime">
                              <div className="blockCreateTime">生成时间：{item.createTime} </div>
                            </div>
                          </div>
                        </div>
                      )
                    }
                  })}
                </div>
              </Tab.Item>
            );
          })}
        </Tab>
      </div>
    );
  }

  componentDidMount() {
    this.props.getAllOrderData();
    this.props.getOrderedData();
    this.props.getOrderingData();
  }
}

const mapState = (state) => ({
  allOrderData: state.getIn(['bought', 'allOrderData']).toJS(),
  orderedData: state.getIn(['bought', 'orderedData']).toJS(),
  orderingData: state.getIn(['bought', 'orderingData']).toJS(),
  orderTotal: state.getIn(['bought', 'orderTotal']),
  totalIncome: state.getIn(['bought', 'totalIncome']),
  balance: state.getIn(['bought', 'balance']),
  totalCost: state.getIn(['bought', 'totalCost'])
});

const mapDispatch = (dispatch) => ({
  getAllOrderData() {
    dispatch(actionCreators.getAllOrderData());
  },
  getOrderingData() {
    dispatch(actionCreators.getOrderingData());
  },
  getOrderedData() {
    dispatch(actionCreators.getOrderedData());
  }
});

export default connect(mapState, mapDispatch)(withRouter(PostCategory));